<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <input type="text" 
      placeholder="请输入信息" 
      v-model="searchText"
      @keyup.13="search"
       />
      <ul>
        <li v-for="(person) in newPersons">{{ person.name }} {{ person.age }}</li>
      </ul>

      <button>升序</button>
      <button>降序</button>
      <button>默认</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const vm = new Vue({
        data: {
          persons: [
            { id: 1, name: "小王", age: 20 },
            { id: 1, name: "小华", age: 22 },
            { id: 1, name: "小红", age: 25 },
            { id: 1, name: "李沛华", age: 30 },
            { id: 1, name: "黄子韬", age: 32 },
            { id: 1, name: "杨泽涛", age: 25 },
            { id: 1, name: "杨徐康", age: 26 },
            { id: 1, name: "成龙", age: 24 },
            { id: 1, name: "马冬梅", age: 30 },
            { id: 1, name: "夏洛克", age: 28 },
            { id: 1, name: "王老师", age: 40 },
            { id: 1, name: "老刘", age: 45 },
            { id: 1, name: "老李", age: 50 },
            { id: 1, name: "袁华", age: 35 },
            { id: 1, name: "大爷", age: 60 },
          ],
          searchText: "",

          newPersons:[
          { id: 1, name: "小王", age: 20 },
            { id: 1, name: "小华", age: 22 },
            { id: 1, name: "小红", age: 25 },
            { id: 1, name: "李沛华", age: 30 },
            { id: 1, name: "黄子韬", age: 32 },
            { id: 1, name: "杨泽涛", age: 25 },
            { id: 1, name: "杨徐康", age: 26 },
            { id: 1, name: "成龙", age: 24 },
            { id: 1, name: "马冬梅", age: 30 },
            { id: 1, name: "夏洛克", age: 28 },
            { id: 1, name: "王老师", age: 40 },
            { id: 1, name: "老刘", age: 45 },
            { id: 1, name: "老李", age: 50 },
            { id: 1, name: "袁华", age: 35 },
            { id: 1, name: "大爷", age: 60 },
          ],

        },
        methods: {
          search(){
            this.newPersons = this.persons.filter((person) => person.name.includes(this.searchText))
           /*  const _this = this;
            //遍历persons  然后过滤掉不想要的内容
            this.persons = this.persons.filter(function(person){
              //使用includes的方法判断 persons里面的name属性是否在 searchText属性上
              return person.name.includes(_this.searchText);
            }); */

            //把newPersons赋值给newPersons
            // this.newPersons = newPersons;
            console.log(this.newPersons);
          },
        },

        computed: {},
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
